<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >寝室报修</el-breadcrumb-item>
            <el-breadcrumb-item >报修回复</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20" v-if="advise2">
            <el-col :span="12">
                <h6>报修详情</h6>
                <h4>标题--- {{advise2.title}}</h4>
                <p>意见人: {{advise2.username}}    时间: {{advise2.time | timeFormat}}  </p>
                <p>内容:</p>
                <el-card shadow="always" class="adcontent">
                    <div v-html="advise2.content" >

                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <h5>回复列表</h5>
                <div v-for="(item,i) in advise2.reply" :key="i">
                    <p>
                        {{item.author}} / {{item.time | timeFormat}} 
                        <el-tag effect="plain" :type="item.roleid | colortype"> {{item.roleid | rolename}}</el-tag>
                    </p>
                    <p>{{item.tips}}</p>
                    <hr>
                </div>
                <el-form 
                :model="form" 
                :rules="rules"
                ref="myform" 
                style="width:80%"
                label-position="top" 
                class="myform">
                <el-form-item label="意见回复" prop="tips">
                    <el-input v-model="form.tips"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="danger" @click="addReply">点击回复</el-button>
                </el-form-item>
            </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getadvisebyid2,updateadvisebyid2,addreply2} from "@/api"

export default {
    data(){
        return {
            advise2:null,
            form:{},
            rules:{
                tips:[
                    {required:true,message:"请输入回复消息",trigger:"blur"}
                ]
            }
        }
    },
    methods:{
        addReply(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    addreply2(
                        {
                            username:sessionStorage.getItem("username"),
                            tips:this.form.tips,
                            _id:this.$route.params.id
                        }
                    )
                    .then(res=>{
                        if(res.type){
                            getadvisebyid2({
                                _id:this.$route.params.id
                            }).then(res=>{
                                if(res.type){
                                    this.advise2 = res.result;
                                    this.form = {};
                                }
                            })
                        }
                    })
                }else{
                    this.$message.error("请务必输入")
                    return false;
                }
            })
        }
    },
    mounted(){
        getadvisebyid2({
            _id:this.$route.params.id
        }).then(res=>{
            if(res.type){
                this.advise2 = res.result;
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.adcontent{
    width:80%;
    height:260px;
    border:1px solid darkkhaki;
    border-radius:10px;
}
</style>